<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>7-jquery基础选择器</title>
		<script type="text/javascript" src="js/jquery2.1.4.min.js"></script>
	</head>
	<body>
		<ul id="baidu">
			<li>百度</li>
			<li>百度</li>
			<li>百度</li>
		</ul>
		<ol>
			<li class="sina">新浪</li>
			<li class="sina">新浪</li>
			<li class="sina">新浪</li>
		</ol>
		<button>显示</button>
		<button>隐藏</button>
		<button>正常</button>
		<script type="text/javascript">
			//页面加载完成
			$(function(){
				//ID选择器
				// var baidu = $("#baidu");
				// console.dir(baidu);
				// //类选择器
				// var sina = $('.sina');
				// console.dir(sina);
				//第一个class='sina'的li标签文字变色
				/**
				 * $('.sina')[0].css("color","red");
				 * 报错$(...)[0].css is not a function
				 * $('.sina')[0] 得到得是原生DOM对象,就不能调用jquery里面css方法
				 */
				
				$('ol li:first').css("color","red");
				console.log($('.sina')[0]);//DOM对象
				console.log($('ol li:first'));//Jquery对象
				//标签选择器
				var btn = $("button");
				//console.dir(btn);
			});
		</script>
	</body>
</html>
